<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五子棋</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		.my-canvas {
			width: 500px;
			height: 500px;
			margin: 20px auto;
			display: block;
			box-shadow: 1px 2px 5px 1px rgba(1,1,1,.5);
		}
		h1 {
			font-size: 40px;
			font-family: 'Microsoft yahei';
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>五子棋</h1>
	<canvas id="my-canvas" class="my-canvas" width="500px" height="500px"></canvas>
	<div style="text-align:center;">
		<input type="button" id="btn-start" value="开始" />
		<input type="button" id="btn-stop" value="认输" />
	</div>
	
	<script>

		var ChessTool = {
			CHESS_TYPE : {
				WRITE: "WRITE",
				BLACK: "BLACK"
			},
			STATUS: {
				BEGIN: "BEGIN",
				STOP: "STOP"
			},
			getChessPos: function(pos) {
				if(pos.y < 20 || pos.x < 20 ||
					pos.x > 485 || pos.y > 485) {
					return null;
				}
				var xIndex = Math.round((pos.x - 25) / 30);
				var yIndex = Math.round((pos.y - 25) / 30);
				var tempObj = {
					x: xIndex * 30 + 25,
					y: yIndex * 30 + 25,
					xIndex: xIndex,
					yIndex: yIndex
				};
				return tempObj;
			},
			getMousePos: function(e) {
				var x,y;
				if (e.layerX || e.layerX == 0) {
				　　x = e.layerX;
				　　y = e.layerY;
				} else if (e.offsetX || e.offsetX == 0) { // Opera
				　　x = e.offsetX;
				　　y = e.offsetY;
			　　}
			　　return {x: x, y: y};
			},
			drawBlack: function(ctx, x, y) {
				ctx.beginPath();
				ctx.globalAlpha= 1;
				ctx.fillStyle = "#000";
				ctx.arc(x, y, 15, 0 , 360, false);
				ctx.fill();
				ctx.closePath();
			},
			drawWrite: function(ctx, x, y) {
				ctx.beginPath();
				ctx.globalAlpha= 1;
				ctx.fillStyle = "#fff";
				ctx.strokeStyle = '#000';//填充绿色
				ctx.lineWidth = 1;
				ctx.arc(x, y, 15, 30 , 30 * Math.PI / 180, true);
				ctx.fill();
				ctx.stroke();
				ctx.closePath();
			},
			drawChess: function(ctx, chessType, x, y) {
				if(chessType === this.CHESS_TYPE.WRITE) {
					this.drawWrite(ctx, x, y);
				}else if(chessType === this.CHESS_TYPE.BLACK) {
					this.drawBlack(ctx, x, y);
				}
			}
		};

		var Chess = function() {
			
			this.init = function() {
				this.canvasObj = document.querySelector("#my-canvas");
				this.btnStart = document.querySelector("#btn-start");
				this.btnStop = document.querySelector("#btn-stop");
				this.btnStop.disabled = true;
				var ctx = this.canvasObj.getContext("2d");
				ctx.strokeStyle = '#000';//填充绿色
				ctx.lineWidth = 1;
				this.ctx = ctx;
				this.coors = [];
				this.histories = [];
				this.status = ChessTool.STATUS.STOP;

				this.bindEvents();
			}

			//画棋盘
			this.drawBoard = function() {
				var ctx = this.ctx;
				ctx.globalAlpha= 1;
				for(var i = 0; i < 16; i++) {
					ctx.moveTo(25.5, 25.5 + i * 30);
					ctx.lineTo(475.5, 25.5 + i * 30);
					ctx.stroke();
					ctx.moveTo(25.5 + i * 30, 25.5);
					ctx.lineTo(25.5 + i * 30, 475.5);
					ctx.stroke();
				}

				for(var i = 0; i < 17; i++) {
					for(var j = 0; j < 17; j++) {
						var obj = { x: 25 + i*30, y: 25 + j * 30 };
						this.coors.push(obj);
					}
				}
				
				var bgImg = document.createElement("img");
				bgImg.src = "../bg.jpg";
				bgImg.onload = function() {
					ctx.globalAlpha= (Math.sin(0) + 1) / 2;
					ctx.drawImage(bgImg, 0, 0);
					ctx.globalAlpha= 1;
				}
			}

			this.resetBoard = function() {
				var ctx = this.ctx;
				// ctx.globalAlpha = 1;
				ctx.fillStyle ="#ffffff";
				ctx.fillRect(0,0,500,500);
			}

			this.bindEvents = function() {
				this.btnStart.addEventListener("click", function() {
					this.status = ChessTool.STATUS.BEGIN;
					this.btnStart.disabled = true;
					this.btnStop.disabled = false;
					this.drawBoard();
				}.bind(this), false);

				this.btnStop.addEventListener("click", function() {
					this.status = ChessTool.STATUS.STOP;
					this.btnStart.disabled = false;
					this.btnStop.disabled = true;
					this.resetBoard();
				}.bind(this), false);

				this.canvasObj.addEventListener("click", function(e) {
					this.listenChange(e);
				}.bind(this), false);
			}

			this.listenChange = function(e) {
				
				if(this.status === ChessTool.STATUS.STOP) {
					alert("还未开始!");
					return false;
				}

				var mPos = ChessTool.getMousePos(e);
				var cPos = ChessTool.getChessPos(mPos);

				if(!cPos) {
					return;
				}
				
				var type = this.histories.length % 2 == 0 ? 
					ChessTool.CHESS_TYPE.BLACK : ChessTool.CHESS_TYPE.WRITE;

				var historyItem = {
					type: type,
					x: cPos.x,
					y: cPos.y
				};
				console.log(cPos);
				this.histories.push(historyItem);
				ChessTool.drawChess(this.ctx, type, cPos.x, cPos.y);
			}
		}

		var chess = new Chess();
		chess.init();
		


		
		// console.log(bgimg);
		
		
	</script>

	
</body>
</html>